<template>
  <div class="tw-flex tw-w-full tw-h-full tw-items-center tw-justify-center">
    <q-separator
      :style="{
        backgroundColor: node.model.color,
      }"
      :vertical="node.model.vertical"
      class="tw-w-full"
      :size="node.model.size + 'px'"
    />
    <TeleportForm :node="node">
      <template #default="{ model }">
        <div class="q-pa-md q-gutter-md row">
          <div class="col">
            <label>垂直</label>
            <q-toggle v-model="model.vertical"></q-toggle>
          </div>
        </div>
        <q-input class="col" v-model="model.size" type="number" label="粗细" />
        <div class="q-mt-md">
          <label>线条颜色</label>
          <q-input v-model="model.color"></q-input>
          <q-color v-model="model.color" format-model="hexa" />
        </div>
      </template>
    </TeleportForm>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import defaultProps from 'src/pages/BiographicalNotes/common/defaultProps';
import TeleportForm from '../../TeleportForm/TeleportForm.vue';
export default defineComponent({
  name: 'SeparatorComponent',
  components: { TeleportForm },
  props: defaultProps,
  setup() {
    return {};
  },
});
</script>
